<template>
    <div>
        <Modal title="身份验证" v-model="passCheckVisible" footer-hide>
            <div class="pass-check" @keydown.enter="checkPass">
                <Icon type="md-lock" size="30" style="margin-bottom: 10px" />
                <div class="desc">{{ placeholder }}</div>
                <Input autofocus v-model="password" password size="large" :placeholder="placeholder" type="password" style="width: 300px; margin-bottom: 40px" />
                <div class="error-message" v-show="password && !validatePassword(password)">密码长度为8-20个字符码，且应为数字、字母大小和特殊字符混合组成</div>
                <div style="margin-bottom: 60px">
                    <Button size="large" @click="passCheckVisible = false" style="margin-right: 20px">取消</Button>
                    <Button :loading="loading" :disabled="!password" @click="checkPass" type="primary" size="large">提交</Button>
                </div>
            </div>
        </Modal>
    </div>
</template>

<script>
export default {
    props: {
        // 默认标题和输入框显示信息
        placeholder: {
            type: String,
            default: '请输入新的密码'
        }
    },
    name: 'circleLoading',
    data() {
        return {
            loading: false,
            passCheckVisible: false, // 密码验证
            password: ''
        };
    },
    methods: {
        checkPass() {
            if (this.validatePassword(this.password)) {
                this.$emit('on-success', true, this.password);
                this.passCheckVisible = false;
            } else {
                // this.$Message.error("密码长度不得小于8位，且应为数字、大小写字母和特殊字符混合组成");
                this.$Message.error({
                    content: '密码长度为8-20个字符码，且应为数字、字母大小和特殊字符混合组成',
                    duration: 5,
                    closable: true
                });
            }
        },
        show() {
            this.password = '';
            this.passCheckVisible = true;
        },
        validatePassword(password) {
            const regex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&._|])[a-zA-Z\d@$!%*?&._|]{8,16}$/;
            return regex.test(password);
        }
    }
};
</script>

<style lang="less">
.pass-check {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    .desc {
        font-size: 14px;
        line-height: 28px;
        margin: 15px 0;
    }
    .error-message {
        color: red;
        margin-bottom: 10px;
    }
}
</style>
